<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 商品评价系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px 0;
        }
        .register-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            overflow: hidden;
            margin: 20px 0;
        }
        .register-form {
            padding: 40px;
        }
        .register-image {
            background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            min-height: 600px;
        }
        .form-control {
            border-radius: 10px;
            border: 2px solid #e9ecef;
            padding: 12px 15px;
        }
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        .btn-register {
            background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 10px;
            padding: 12px;
            font-weight: 600;
        }
        .btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        .alert {
            border-radius: 10px;
        }
        .password-strength {
            height: 5px;
            border-radius: 3px;
            margin-top: 5px;
            transition: all 0.3s;
        }
        .strength-weak { background-color: #dc3545; }
        .strength-medium { background-color: #ffc107; }
        .strength-strong { background-color: #28a745; }
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="register-container row g-0">
                    <!-- 左侧注册表单 -->
                    <div class="col-lg-7">
                        <div class="register-form">
                            <div class="text-center mb-4">
                                <h3 class="fw-bold">创建新账户</h3>
                                <p class="text-muted">加入我们，开始您的购物评价之旅</p>
                            </div>
                            
                            <!-- 错误/成功提示 -->
                            <div id="messageAlert" class="alert d-none" role="alert">
                                <i class="fas fa-info-circle me-2"></i>
                                <span id="messageText"></span>
                            </div>
                            
                            <!-- 注册表单 -->
                            <form id="registerForm">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="username" class="form-label">
                                            <i class="fas fa-user me-2"></i>用户名 *
                                        </label>
                                        <input type="text" class="form-control" id="username" name="username" 
                                               placeholder="请输入用户名" required>
                                        <div class="form-text">用户名长度为3-20个字符</div>
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <label for="realName" class="form-label">
                                            <i class="fas fa-id-card me-2"></i>真实姓名
                                        </label>
                                        <input type="text" class="form-control" id="realName" name="realName" 
                                               placeholder="请输入真实姓名">
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="email" class="form-label">
                                        <i class="fas fa-envelope me-2"></i>邮箱地址 *
                                    </label>
                                    <input type="email" class="form-control" id="email" name="email" 
                                           placeholder="请输入邮箱地址" required>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="phone" class="form-label">
                                        <i class="fas fa-phone me-2"></i>手机号码
                                    </label>
                                    <input type="tel" class="form-control" id="phone" name="phone" 
                                           placeholder="请输入手机号码">
                                </div>
                                
                                <div class="mb-3">
                                    <label for="password" class="form-label">
                                        <i class="fas fa-lock me-2"></i>密码 *
                                    </label>
                                    <div class="input-group">
                                        <input type="password" class="form-control" id="password" name="password" 
                                               placeholder="请输入密码" required>
                                        <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    <div class="password-strength" id="passwordStrength"></div>
                                    <div class="form-text">密码长度至少6位，建议包含字母和数字</div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="confirmPassword" class="form-label">
                                        <i class="fas fa-lock me-2"></i>确认密码 *
                                    </label>
                                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" 
                                           placeholder="请再次输入密码" required>
                                </div>
                                
                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="agreeTerms" required>
                                    <label class="form-check-label" for="agreeTerms">
                                        我已阅读并同意 <a href="#" class="text-decoration-none">用户协议</a> 和 
                                        <a href="#" class="text-decoration-none">隐私政策</a>
                                    </label>
                                </div>
                                
                                <button type="submit" class="btn btn-primary btn-register w-100 mb-3">
                                    <i class="fas fa-user-plus me-2"></i>注册账户
                                </button>
                            </form>
                            
                            <div class="text-center">
                                <p class="mb-0">
                                    已有账户？
                                    <a href="/product-review/page/login" class="text-decoration-none">
                                        立即登录
                                    </a>
                                </p>
                                <a href="/product-review/page/index" class="text-muted text-decoration-none mt-2 d-block">
                                    <i class="fas fa-arrow-left me-2"></i>返回首页
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 右侧图片区域 -->
                    <div class="col-lg-5 register-image">
                        <div class="text-center">
                            <i class="fas fa-users fa-5x mb-4"></i>
                            <h2>加入我们</h2>
                            <p class="lead">成为会员，享受更多服务</p>
                            <ul class="list-unstyled mt-4">
                                <li class="mb-2"><i class="fas fa-check me-2"></i>浏览所有商品</li>
                                <li class="mb-2"><i class="fas fa-check me-2"></i>发表商品评价</li>
                                <li class="mb-2"><i class="fas fa-check me-2"></i>个人中心管理</li>
                                <li class="mb-2"><i class="fas fa-check me-2"></i>专属会员服务</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 密码显示/隐藏切换
            $('#togglePassword').click(function() {
                const passwordField = $('#password');
                const icon = $(this).find('i');
                
                if (passwordField.attr('type') === 'password') {
                    passwordField.attr('type', 'text');
                    icon.removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    passwordField.attr('type', 'password');
                    icon.removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });
            
            // 密码强度检测
            $('#password').on('input', function() {
                const password = $(this).val();
                const strength = checkPasswordStrength(password);
                updatePasswordStrength(strength);
            });
            
            // 注册表单提交
            $('#registerForm').submit(function(e) {
                e.preventDefault();
                
                if (validateForm()) {
                    register();
                }
            });
        });
        
        // 表单验证
        function validateForm() {
            const username = $('#username').val().trim();
            const email = $('#email').val().trim();
            const password = $('#password').val();
            const confirmPassword = $('#confirmPassword').val();
            
            // 用户名验证
            if (!username || username.length < 3 || username.length > 20) {
                showMessage('用户名长度必须在3-20个字符之间', 'danger');
                return false;
            }
            
            // 邮箱验证
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!email || !emailRegex.test(email)) {
                showMessage('请输入有效的邮箱地址', 'danger');
                return false;
            }
            
            // 密码验证
            if (!password || password.length < 6) {
                showMessage('密码长度至少6位', 'danger');
                return false;
            }
            
            // 确认密码验证
            if (password !== confirmPassword) {
                showMessage('两次输入的密码不一致', 'danger');
                return false;
            }
            
            // 协议同意验证
            if (!$('#agreeTerms').is(':checked')) {
                showMessage('请阅读并同意用户协议和隐私政策', 'danger');
                return false;
            }
            
            return true;
        }
        
        // 注册函数
        function register() {
            const formData = {
                username: $('#username').val().trim(),
                realName: $('#realName').val().trim(),
                email: $('#email').val().trim(),
                phone: $('#phone').val().trim(),
                password: $('#password').val()
            };
            
            // 显示加载状态
            const submitBtn = $('#registerForm button[type="submit"]');
            const originalText = submitBtn.html();
            submitBtn.html('<i class="fas fa-spinner fa-spin me-2"></i>注册中...').prop('disabled', true);
            
            $.ajax({
                url: '/product-review/user/register',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(result) {
                    if (result.code === 200) {
                        showMessage('注册成功！正在跳转到登录页面...', 'success');
                        setTimeout(function() {
                            window.location.href = '/product-review/page/login';
                        }, 2000);
                    } else {
                        showMessage(result.message || '注册失败', 'danger');
                    }
                },
                error: function(xhr) {
                    let errorMsg = '注册失败';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    } else if (xhr.status === 409) {
                        errorMsg = '用户名或邮箱已存在';
                    }
                    showMessage(errorMsg, 'danger');
                },
                complete: function() {
                    // 恢复按钮状态
                    submitBtn.html(originalText).prop('disabled', false);
                }
            });
        }
        
        // 检查密码强度
        function checkPasswordStrength(password) {
            if (password.length < 6) return 0;
            
            let score = 0;
            
            // 长度加分
            if (password.length >= 8) score += 1;
            if (password.length >= 12) score += 1;
            
            // 包含数字
            if (/\d/.test(password)) score += 1;
            
            // 包含小写字母
            if (/[a-z]/.test(password)) score += 1;
            
            // 包含大写字母
            if (/[A-Z]/.test(password)) score += 1;
            
            // 包含特殊字符
            if (/[^\w\s]/.test(password)) score += 1;
            
            if (score < 3) return 1; // 弱
            if (score < 5) return 2; // 中
            return 3; // 强
        }
        
        // 更新密码强度显示
        function updatePasswordStrength(strength) {
            const strengthBar = $('#passwordStrength');
            strengthBar.removeClass('strength-weak strength-medium strength-strong');
            
            switch (strength) {
                case 1:
                    strengthBar.addClass('strength-weak').css('width', '33%');
                    break;
                case 2:
                    strengthBar.addClass('strength-medium').css('width', '66%');
                    break;
                case 3:
                    strengthBar.addClass('strength-strong').css('width', '100%');
                    break;
                default:
                    strengthBar.css('width', '0%');
            }
        }
        
        // 显示消息
        function showMessage(message, type) {
            $('#messageText').text(message);
            $('#messageAlert')
                .removeClass('d-none alert-success alert-danger alert-warning')
                .addClass('alert-' + type);
            
            // 滚动到消息位置
            $('html, body').animate({
                scrollTop: $('#messageAlert').offset().top - 100
            }, 500);
            
            // 如果是错误消息，5秒后自动隐藏
            if (type === 'danger') {
                setTimeout(function() {
                    $('#messageAlert').addClass('d-none');
                }, 5000);
            }
        }
    </script>
</body>
</html>